import './button.scss';
import { cssPrefix } from '../baseData';
import React from 'react';

import Icon from '../icon/Icon.jsx';

const { Provider, Consumer }  = React.createContext({type: ''});

class Button extends React.Component{
  constructor(props) {
    super(props);
    this.state = {};
  }
  render(){
    return <Consumer>
      {
        (data)=>{
          let props = {...data, ...this.props},
            { iconType, type, size, className, onClick, href, target, block, isActive, activeType } = props,
          tmpType = isActive && activeType ? activeType : type;
          !className && (className = '');
          className += ` ${cssPrefix}button${tmpType ? `-${tmpType}` : ''}`;
          size && (className += ` ${cssPrefix}button-${size}`);
          block && (className += ` ${cssPrefix}button-block`);

          if(href){
            return <a className={className} href={href} target={target}>
              {
                iconType && <Icon type={iconType} />
              }
              {props.children}
            </a>
          }else{
            return <span className={className} onClick={onClick && onClick.bind(this, props)}>
              {
                iconType && <Icon type={iconType} />
              }
              {props.children}
            </span>
          }
        }
      }

    </Consumer>

  }
}

class ButtonGroup extends React.Component{
  render(){
    let { className } = this.props;

    !className && (className = '');
    className += ` ${cssPrefix}button-group`;

    return <div className={className}>
      <Provider value={this.props}>
        {this.props.children}
      </Provider>
      </div>
  }
}

module.exports = {
  Button, ButtonGroup
}